<template>
    <el-card class="box-card">
        <el-form :model="userBalancesForm" :inline="true">
            <el-form-item>
                <el-select v-model="userBalancesForm.user_type" placeholder="商户类型">
                    <el-option v-for="item in userBalancesForm.user_options" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="userBalancesForm.user_name" placeholder="商户名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="userBalancesForm.contacts_user" placeholder="联系人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="userBalancesForm.city_name" placeholder="城市名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button>查询</el-button>
                <el-button>导出</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="userBalancesData" border>
            <el-table-column label="序号" prop="number" width="70"></el-table-column>
            <el-table-column label="商户名称" prop="user_name"></el-table-column>
            <el-table-column label="联系人" prop="contacts_user"></el-table-column>
            <el-table-column label="商户类型" width="100">
                <template scope="scope">
                    <a @click="goOrders" style="cursor:pointer">{{scope.row.user_type}}</a>
                </template>
            </el-table-column>
            <el-table-column label="城市" prop="city_name" show-overflow-tooltip=true></el-table-column>
            <el-table-column label="余额" prop="balances" show-overflow-tooltip=true></el-table-column>
            <el-table-column label="最后更新时间" prop="last_update" show-overflow-tooltip=true></el-table-column>
        </el-table>
        <el-col :span="24" class="toolPage">
            <el-pagination :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
                :total="page.total" style="float:right" @size-change="handleSizeChange" @current-change="handlePageChange">
                </el-pagination>
        </el-col>
    </el-card>
</template>
<script>
    export default {
        data() {
            return {
                userBalancesForm: {
                    user_type: '',
                    user_options: [
                        {
                            value: '选项1',
                            label: '全部类型'
                        }, {
                            value: '选项2',
                            label: '大B'
                        }, {
                            value: '选项3',
                            label: '小b'
                        }
                    ],
                    user_name: '',
                    contacts_user: '',
                    city_name: ''
                },
                userBalancesData: [
                    {
                        number: '1',
                        user_name: '田园批发商一部',
                        contacts_user: '少青少青少',
                        user_type: '大B',
                        city_name: '上海市',
                        balances: '11111123',
                        last_update: '2017年2月23日 14:13'
                    }
                ],
                page: {
                    total: 0,
                    current: 1,
                    size: 10,
                },
            }
        },
        methods: {
            goOrders() {
                this.$router.push(`/orders`);
            },
            handleSizeChange(size) {
                this.page.size = size
                // this.loadGridData()
            },
            handlePageChange(current) {
                this.page.current = current
                // this.loadGridData()
            },
        }
    }

</script>